<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 使用jQuery之前，需要引入js文件 -->
    <script src="js/jquery-1.12.4.js"></script>

    <script>
        // 原始js代码
        window.onload = function() {
            alert("onload");
            var oDiv = document.getElementById("mydiv");
            oDiv.style.color = 'red';
        };

        // jQuery代码，对于jquery来说 $ 符号就是jQuery的象征
        // $ 它是一个函数，函数名就是$
        $(document).ready(function() {
            alert("ready");
            // 使用jQuery的方式来获取标签对象
            // 如果是jQuery的对象，需要使用$div的方式命名
            var $div = $("#mydiv") // jQuery的获取标签的匹配规则，和css选择器的匹配规则一样
            $div.css({background: "green"});            
        });

        // 总结：ready 等待页面所有元素加载完成以后就会执行
        //      onload 是等待页面所有元素加载完成并且还要等待数据加载完成以后才会执行
        //      结论是，ready比onload先执行

        // jQuery简写方式
        $(function() {
            var $div = $("#mydiv") // jQuery的获取标签的匹配规则，和css选择器的匹配规则一样
            $div.css({background: "red"});   
        })
    </script>
</head>
<body>
    <!-- div#mydiv -->
    <div id="mydiv">哈哈哈</div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555945990597&di=bcc193d00290f7e70866afbaf749db96&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3374620495%2C2939740739%26fm%3D214%26gp%3D0.jpg" alt="">
</body>
</html>